<!--
 * @Description: 
 * @Author: 赵升华
 * @Date: 2019-09-02 09:15:06
 * @LastEditors: 赵升华
 * @LastEditTime: 2019-09-02 10:11:46
 -->
<template>
  <div style="padding-bottom:2rem">
      <div id="productDetailHeader" class="vux-1px-b">
        <TopBar color='#fff' style="backgroundColor:#f4675e">{{this.item.name}}</TopBar>
        <div id="productDetailHeaderBox">
          <div style="margin-top:1.3rem">
            <div id="productDetailRow1">
              <div v-if="lc_type == 'bx'">
                <div id="productYear"> </div>
              </div>
              <div v-else>
                <div id="productYear">{{this.item.cp_yqnh}}%</div>
                预期年化
              </div>
              <div id="productBack" v-if="item.cp_fl != 0">
                <span v-if="!item.cp_gdfa">
                  返利{{this.item.cp_fl}}%
                </span>
                <span v-else>
                  返利{{this.item.cp_fl}}元起
                </span>
              </div>
            </div>
            <div id="productDetailRow2">
              <div>
                <div class="productFont">{{parseInt(this.item.cp_qtje)}}元</div>
                起投金额
              </div>
              <Line1></Line1>
              <div>
                <div class="productFont" v-if="item.cp_tzqxlx == 'day'">{{this.item.cp_tzqx}}天</div>
                <div class="productFont" v-else>{{this.item.cp_tzqx}}个月</div>
                投资期限
              </div>
              <Line1></Line1>
              <div v-if="lc_type == 'bx'">
                <div class="productFont"></div> 
              </div>
              <div v-else>
                <div class="productFont" v-if="item.cp_hkfs != ''">{{this.item.cp_hkfs}}</div>
                <div class="productFont" v-else>&nbsp;</div>
                <span>还款方式</span>  
              </div>
            </div>
          </div>
        </div>
        <Title title="产品详情" color="transparent" style="margin-top:2rem"></Title>
      </div>
      <div id="productDetailContent">
        <TableContent :item="item" type="1"></TableContent>
        <div id="productDetailStrategyBox" class="vux-1px-t">
          <Title title="返利攻略" v-if="item.cp_flgl || item.cp_gdfa"></Title>
          <div v-if="item.cp_gdfa">
            <div class="row1 vux-1px-tb">
              <span>投资金额</span>
              <span>利息</span>
              <span>返利</span>
              <span>红包</span>
              <span>总收益</span>
            </div>
            <div class="row2 vux-1px-b" v-for="item in item.cp_gdfa" :key="item.id">
              <span v-text="parseInt(item.tzje)"></span>
              <span v-text="item.lixi"></span>
              <span v-text="item.fanli"></span>
              <span v-text="item.hongbao"></span>
              <span v-text="numAdd(item.hongbao,item.fanli,item.lixi)"></span>
            </div>
            <!-- <table border="1" cellspacing="0" cellpadding="0" style="margin:0 auto .2rem;width:92%;border-color:#aaa;">
              <tr>
                <th v-for="title in tableTitles" :key="title.id" v-text="title"></th>
              </tr>
              <tr v-for="row in item.cp_gdfa" :key="row.id">
                <td style="text-align:center" v-text="parseInt(row.tzje)"></td>
                <td style="text-align:center" v-text="row.lixi"></td>
                <td style="text-align:center" v-text="row.fanli"></td>
                <td style="text-align:center" v-text="row.hongbao"></td>
                <td style="text-align:center">{{numAdd(row.hongbao,row.fanli,row.lixi)}}</td>
              </tr>
            </table> -->
          </div>
          <div id="productDetailStrategy" v-html="item.cp_flgl"></div>
        </div>
      </div>
      <div style="height:0.2667rem;background-color:#f7f8fa"></div>
      <PlatformDetail :ptid="item.pt_id" :lc_type="lc_type"></PlatformDetail>
      <div class="disclaimer">
        <p>免责声明</p>
        <p style="font-size:.38rem">比赚页面中的产品来自于合作平台，仅做展示，不代表平台安全性，不构成投资建议，总收益不代表最终真实到手金额。请根据个人投资选择进行投资，比赚不承担安全责任。
        </p>
      </div>
      <!-- <div style="margin-bottom:1.7rem" v-if="item.cplist">
        <Title title="投资产品"></Title>
        <RecommendItem type="productDetail" v-for="item in item.cplist" :key="item.id" :item="item" style="margin:.05rem auto .29rem;"></RecommendItem>
      </div> -->
      <div id="productDetailBottomBox" class="vux-1px-t">
        <a href="http://p.qiao.baidu.com/cps/chat?siteId=12039448&userId=21560798">
          <div id="online" style="color:#000">在线咨询</div>
        </a>
        <div id="goInvest" @click="showHint" v-text="lc_type == 'bx'?'立即投保':'前往投资'"></div>
      </div>
      <div v-transfer-dom>
        <x-dialog :show="showHintBox" class="dialogBox" hide-on-blur>
          <ShowHint @close="closeDialog" :item="item"></ShowHint>
        </x-dialog>
      </div>
      <toast 
        v-model="showPositionValue" 
        type="text" 
        :time="2000" 
        is-show-mask 
        :text="msg" 
        position="middle"></toast>
  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import Line1 from '../../component/common/Line'
import Title from '../../component/common/Title'
import TableContent from '../../component/common/TableContent'
import RecommendItem from '../../component/common/RecommendItem'
import ShowHint from './children/ShowHint'
import PlatformDetail from '../platformDetail/PlatformDetail'
import { XDialog, TransferDomDirective as TransferDom,Toast,querystring } from 'vux'
import {cpDetail} from '../../../service/getData.js'
import { showMsg,getStore, setStore,getLStore } from '../../../config/mUtils';
import { clearTimeout } from 'timers';
import {getSDK} from '../../../service/wxShare.js'

let time = null
export default {
  components:{
    TopBar,
    Line1,
    Title,
    TableContent,
    RecommendItem,
    ShowHint,
    XDialog,
    Toast,
    PlatformDetail
  },
  beforeCreate(){
      getSDK()
    },
  created(){
    let pid = querystring.parse()['pid']
    if(pid){
      this.id = pid
      setStore('pid',pid)
    }
    cpDetail(getStore('pid'))
      .then(res=>{
        console.log(res)
        this.item = res.info
        this.lc_type = res.info.lc_type
        setStore('lctype',res.info.lc_type)
      })
  },
  data(){
    return {
      showHintBox:false,
      tableTitles:['投资金额','利息','返利','红包','总收益'],
      item:{},
      id:'',
      showPositionValue:false,
      msg:'',
      lc_type:''
    }
  },
  methods:{
    showHint(){
      //判断登录状态
      let now = Number(new Date().getTime())
      if(getLStore('loginkey')){
        let expiretime = Number(getLStore('expiretime'))
        if(now < expiretime){
          setStore('loginkey',getLStore('loginkey')) 
          setStore('phone',getLStore('phone'))
        }
      }

      if(getStore('loginkey')){
        this.showHintBox = true
      }else{
        showMsg('请先登录',this)
        setStore('pre','productDetail')
        time = setTimeout(()=>{
          this.$router.push('/login')
        },2000)
      }
    },
    closeDialog(data){
      this.showHintBox = data
    },
    numAdd(num1,num2,num3){//string转double相加
      var baseNum, baseNum1, baseNum2,baseNum3;
      baseNum1 = num1.split(".")[1].length;
      baseNum2 = num2.split(".")[1].length;
      baseNum3 = num3.split(".")[1].length;

      baseNum = Math.pow(10, Math.max(baseNum1, baseNum2, baseNum3)); 
      return ((num1 * baseNum + num2 * baseNum+num3*baseNum) / baseNum).toFixed(2);
    }
  },
  directives: {
    TransferDom
  },
  beforeDestroy(){
    clearTimeout(time)
  }
}
</script>
<style lang="less">
@import '~vux/src/styles/close';
@import '../../../style/mixin.less';
th,td{
  padding: 0
}

  #productDetailHeader{
    width: 10rem;
    height: 7.0667rem;
    background: url('https://www.bigzhuan.com/img/bg.jpg') no-repeat;
    background-size: 100%;
    color: #fff;
    font-size: 0.4267rem;
    #productDetailHeaderBox{
      width: 9.2rem;
      margin: 0 auto;
      #productDetailRow1{
        display: flex;
        flex-direction: row;
        height: 2rem;
        padding: 0 .3rem;
        // background-color: aquamarine;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 6;
        #productYear{
          font-size: 0.9333rem;
          line-height: .9rem
        }
        #productBack{
          box-sizing: border-box;
          // width: 1.9733rem;
          padding: 0 .1rem;
          height: 0.7733rem;
          border: 1px solid #fff;
          text-align: center;
          line-height: 0.7733rem;
          font-size: 0.32rem;
        }
      }
      #productDetailRow2{
        margin-top: .64rem;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        .productFont{
          font-size: 0.4267rem;
        }
      }
    }
  }
  #productDetailContent{
    width: 9.2rem;
    margin: 0 auto;
    #productDetailStrategyBox{
      // height: 4.64rem;
      box-sizing: border-box;
      margin-bottom: .2rem;
      .row1{
        .wh(100%,0.9067rem);
        .fx(row,space-around);
        .bg(#f9f9f9);
        .sc(0.3467rem,#939393);
      }
      .row2{
        .wh(100%,0.9067rem);
        .fx(row,space-around);
        .sc(0.3467rem,#000);

      }
      span{
        .wh(20%,100%);
        .fx();
        font-weight: bold;
      }
      #productDetailStrategy{
        padding: 0 0 0 0.2933rem;
        font-size: 0.3467rem;
        color: #939393;
        width:90%;
        line-height: .6rem;
        img{
          .wh(100%,100%)
        }
      }
    }
  }
  .disclaimer{
    .wh(92%,100%);
    .sc(0.14rem,#939393);
    margin: 0 auto;
    padding-top: 0.2rem;
    p:first-child{
      font-size: 0.4267rem;
    }
  }
  #productDetailBottomBox{
    max-width: 10rem;
    height: 1.6rem;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left:0.4rem; 
    padding-right:0.4rem; 
    font-size: 0.4rem;
    #online{
      width: 3.28rem;
      height: 1.2rem;
      line-height: 1.2rem;
      text-align: center;
      border: 1px solid #e3e3e3;
      border-radius: 2rem;
    }
    #goInvest{
      width: 5.52rem;
      height: 1.2rem;
      line-height: 1.2rem;
      text-align: center;
      background-color: #e2472d;
      color: #fff;
      border-radius: 2rem;
    }
  }
  .weui-dialog{
    width: 7.4667rem !important;
    height: 5.5067rem !important;
  } 
  .vux-x-icon {
    fill: #fff;
  }
  .weui-toast,.weui-toast_text,.vux-toast-middle{
      max-width: 70% !important;
      p.weui-toast__content{
        margin: 0 !important;
      }
    }
</style>
